<template>
    <Card dis-hover :bordered="false">
        <Input v-width="350" 
        v-model="params.keyword" 
        @on-enter="getUserList"
        @on-clear="getUserList"
        clearable
        placeholder="请输入用户名、昵称、手机号、按Enter进行搜索" ></Input>
        <div class="ivu-fr">
            <Button @click="handleAdd" type="primary" v-hasC="{ name: 'v1-rbac-person-person-add-edit', flag: 'v1/rbac/person/person-add-edit'}">新增</Button>
        </div>
        <Table :columns="columns" :data="list" :loading="loading" border class="ivu-mt-16" @on-sort-change="sortChange" v-hasC="{ name: 'v1-member-index-get-list', flag: 'v1/member/index/get-list'}">
            <!-- <template #role="{row}">
                <Tag :color="row.is_department_leader == 1?'primary':'green'">{{row.leader_str}}</Tag>
            </template> -->
            <template #username="{row}">
                {{row.username}} <Icon type="ios-person" v-if="row.is_project_leader==1"/>
            </template>
            <template #status="{row}">
                <Badge v-if="+row.status === 1" status="success" text="正常" />
                <Badge v-else status="error" text="停用" />
            </template>
            <template #action="{row}">
                <span v-if="row.is_project_leader==1">
                <a @click="handleEdit(row)" disabled v-hasC="{ name: 'v1-rbac-person-person-add-edit2', flag: 'v1/rbac/person/person-add-edit'}">编辑</a>
                <Divider type="vertical" v-hasC="{ name: 'v1-rbac-person-person-add-edit2', flag: 'v1/rbac/person/person-add-edit'}"/>
                <a class="fontColor" @click="handleDelete(row.id)" disabled v-hasC="{ name: 'v1-rbac-person-person-del', flag: 'v1/rbac/person/person-del'}">删除</a>
                </span>
                <span v-else>
                <a @click="handleEdit(row)" v-hasC="{ name: 'v1-rbac-person-person-add-edit2', flag: 'v1/rbac/person/person-add-edit'}">编辑</a>
                <Divider type="vertical" v-hasC="{ name: 'v1-rbac-person-person-add-edit2', flag: 'v1/rbac/person/person-add-edit'}"/>
                <a class="fontColor" @click="handleDelete(row.id)" v-hasC="{ name: 'v1-rbac-person-person-del', flag: 'v1/rbac/person/person-del'}">删除</a>
                </span>
            </template>
        </Table>
        
        <Page class="ivu-mt-16" 
        show-total 
        show-sizer 
        :total="total" 
        :current.sync="params.page"
        :page-size="params.pageSize" 
        @on-change="changepage"
        @on-page-size-change="changepageSize" v-hasC="{ name: 'v1-member-index-get-list', flag: 'v1/member/index/get-list'}"></Page>
        <Modal :mask-closable="false"  v-model="personModal" :title="edit?'新增':'编辑'" width="560" :footer-hide=true>
            <Form :label-width="100" ref="create" :model="userInfo" :rules="rules" @on-cancel='cancel'>
                <FormItem label="角色" prop="relation_id" required>
                    <Select multiple v-model="userInfo.relation_id" >
                        <Option v-for="item in relationList" :key="item.value" :value="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="用户名" prop="username" required>
                    <Input placeholder="请输入用户名" v-model="userInfo.username" :disabled="!edit"/>
                </FormItem>
                <FormItem label="昵称" prop="name">
                    <Input placeholder="请输入昵称" v-model="userInfo.name"/>
                </FormItem>
                <FormItem label="手机号" prop="mobile" required>
                    <Input placeholder="请输入手机号" v-model="userInfo.mobile"/>
                </FormItem>
                <FormItem label="密码" prop="password" :required="edit?true:false">
                    <Input placeholder="请输入密码" type="password" v-model="userInfo.password"/>
                </FormItem>
                <FormItem label="状态" prop="status">
                    <Switch v-model="userInfo.status" size="large">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </Switch>
                </FormItem>
                <div slot="footer" style="text-align:right;">
                    <Button  @click="cancel" >取消</Button>
                    <Button type="primary" @click="ok" style="margin-left:10px;">保存</Button>
                </div>
            </Form>
           
        </Modal>
    </Card>
    </template>
    <script>
        import {GetList,memberAdd,memberDel,memberEdit,selectInfo} from "@api/set";
        export default {
            name: 'personlList',
            data () {
                return {
                    loading:false,
                    edit:true,
                    personModal:false,
                    userInfo:{
                        username:'',
                        relation_id:'',
                        name:'',
                        mobile:'',
                        password:'jgwl2022',
                        status:true,
                    },
                    relationList:[],
                    params: {
                        page: 1,
                        pageSize: 10,
                        keyword: '',
                        sort_type:0                  
                    },
                    total:0,
                    columns:[
                        {
                            slot:'username',
                            title:'用户名',
                            width:150
                        },
                        {
                            key:'realname',
                            title:'昵称',
                            width:150
                        },
                        {
                            key:'mobile',
                            title:'手机号',
                            width:150
                        },
                        {
                            key:'role_name',
                            title:'角色',
                            width:150
                        },
                        {
                            slot:'status',
                            title:'状态',
                            width:150,
                           
                        },
                        {
                            key:'created_at',
                            title:'最后登录时间',
                            minWidth:150,
                            sortable: true
                        },
                        {
                            slot:'action',
                            title:'操作',
                            width:118
                        }
                    ],
                    list:[],
                    rules: {
                        relation_id:[
                            {
                                required: true, message: '请选择角色',trigger:'change',type:'array'
                            }
                        ],
                        username: [
                            { required: true, message: '请输入用户名登录时使用',trigger:'bulr' }
                        ],
                        name:[ { required: true, message: '请输入昵称',trigger:'bulr' }],
                        mobile: [
                            { required: true, message: '请输入手机号' },
                            { message: '请填写正确的手机号', pattern: /^1[3456789]\d{9}$/ }
                        ],
                        password: [
                            { required: this.edit, message: '请输入密码' },
                        ]
                    },
                };
            },
            created() {
               this. _relationList()
                this.getUserList()
            },
            methods: {
                //获取角色
                _relationList(){
                    selectInfo().then(res=>{
                        this.relationList=res
                    })
                },
                sortChange(e) {
                    if (e.key === 'created_at') {
                    if (e.order === 'desc') {
                        this.params.sort_type = 2;
                    } else if (e.order === 'asc') {
                        this.params.sort_type = 1;
                    } else {
                        this.params.sort_type = 0;
                    }
                }
                    this.getUserList();
                },
                getUserList(){
                    this.loading = true
                    GetList(this.params).then((res) => {
                        this.list = res.list
                        this.total=res.total
                        this.loading = false
                    });
                },
                changepageSize(e) {
                    this.params.pageSize = e;                
                    this.getUserList();
                },
                changepage(e) {
                    this.params.page = e;
                    this.getUserList();
                },
                handleAdd() {
                    // this.userInfo={
                    //     name:'',
                    //     mobile:'',
                    //     password:''
                    // }
                    this.personModal = true
                    this.edit = true  
                    this.$refs.create.resetFields();             
                },
                handleDelete(id) {
                    this.$Modal.confirm({
                        title:'删除提示',
                        content:'是否确认删除人员，删除后将解除数据绑定',
                        onOk:()=> {
                             memberDel({id}).then((res) => {
                               this.$Message.success('删除成功')
                               this.getUserList();
                            });                        
                        }
                    })
                },
                handleEdit(info) {
                    // console.log(info)
                    this.personModal = true
                    this.edit = false
                    this.userInfo.name=info.realname
                    this.userInfo.mobile=info.mobile
                    this.userInfo.password=info.password
                    this.userInfo.id=info.id
                    this.userInfo.username=info.username
                    this.userInfo.status=+info.status===1?true:false
                    this.userInfo.relation_id=info.relation_id?info.relation_id.split(','):''

                },
                cancel(){
                    this.personModal=false
                    this.$refs.create.resetFields();             
                },
                ok(){
                    this.$refs.create.validate(valid => {
                        if(valid) {
                            const params={
                                username:this.userInfo.username,
                                password:this.userInfo.password,
                                name:this.userInfo.name,
                                mobile:this.userInfo.mobile,
                                status:this.userInfo.status===true?1:0,
                                relation_id:this.userInfo.relation_id?this.userInfo.relation_id.join(','):''
                            }
                            if(this.edit){
                                memberAdd(params).then((res) => {
                                    this.cancel()
                                    this.getUserList();
                                });                
                            }else{
                                memberEdit(Object.assign({},params,{id:this.userInfo.id})).then((res) => {
                                    this.cancel()
                                    this.getUserList();
                                });
                            }
                        }else{
                            this.personModal = true
                            this.$Message.error('填写错误，保存失败！')
                            return;
                        }
                    })
                    
                }
            },
           
        };
    </script>
    <style lang='less'>
        .fontColor {
            color:rgb(223, 7, 7);
        }
    </style>